/**
 * 
 * 会议详情 学术动态列表详情
 * */

import React, { useEffect, useCallback, useState, useMemo } from 'react';
import Header from '@/component/layout/Header/Header';
import './style.less';
import { Button, Toast } from 'antd-mobile';
import qs from "querystring";
import { getMeetingDetail, shareMeeting } from '@/network/protocol';
import { formatTime } from '@/util/util'
import Loading from "@/component/layout/loading/loading";
import Tab from '@/component/layout/Tab/Tab';

const img1 = require('../../assests/img/1.jpg')

const AcademicDetail = (props) => {
  const { location, location: { search } } = props;
  const [loading1, setLoading1] = useState(true);

  const meetingId = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.meetingId
  }, [location.search])

  const isshare = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.isshare
  }, [location.search])


  const [detail, setDetail] = useState({})

  const wx = useMemo(() => window.wx, [])

  const share = useCallback(() => {
    Toast.success('点击右上角分享', 1)
    // wx.updateAppMessageShareData({
    //   title: detail.name, // 分享标题
    //   desc: detail.introduce, // 分享描述
    //   link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    //   imgUrl: require('../../assests/img/1.jpg'), // 分享图标 
    //   success: function () {
    //     // 设置成功
    //   },
    //   error: function () {
    //   }
    // })
  }, [])

  const configwx = useCallback(async (item) => {
    // let url1 = 'http://haosen.shmatching.com/academicDetail/';
    let url = window.location.href.split('#')[0];
    // let url1 = encodeURIComponent(url)
    let res = await shareMeeting({ url: encodeURIComponent(url) })

    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.appid, // 必填，公众号的唯一标识
      // appId: 'wx8e2e302c607a8e05', // 必填，公众号的唯一标识
      timestamp: '' + res.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.noncestr, // 必填，生成签名的随机串
      signature: res.signature,// 必填，签名
      jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'] // 必填，需要使用的JS接口列表
    });


    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
      wx.updateAppMessageShareData({
        title: item.name, // 分享标题
        desc: item.introduce, // 分享描述
        link: `${url}#/academicDetail?meetingId=${meetingId}&isshare=1`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'http://haosen.shmatching.com/1.jpg', // 分享图标 
        success: function () {
          // 设置成功
        },
        error: function () {
        }
      })
    });

  }, [meetingId, wx])

  const getData = useCallback(async () => {
    try {
      let data = await getMeetingDetail({ meetingId });
      setLoading1(false)
      if (data.errorCode === 0) {
        let item = data.source;
        setDetail({ ...item })
        configwx(item)
      }
    } catch (error) {
      setLoading1(false)
    }

  }, [configwx, meetingId])

  useEffect(() => {
    getData()
  }, [getData])


  if (loading1) return <Loading style={{ flex: 1 }} />

  return (
    <>
      <Header center={<span>会议详情</span>} left={isshare ? <span></span> : null} />
      <div className="global-content AcademicDetail-box">
        <div className="detail-item-box">
          <div className="detail-item">
            <img className="maozi" src={require('../../assests/img/2.png')} alt="" />
            <span>会议名称：</span>
            <span className="detail-item-name">{detail.name}</span>
          </div>
          <div className="detail-item">
            <img src={require('../../assests/img/3.png')} alt="" />
            <span>会议时间：</span>
            <span className="detail-item-name">{formatTime(detail.time)}</span>
          </div>
          <div className="detail-item">
            <img src={require('../../assests/img/1.png')} alt="" />
            <span>会议地点：</span>
            <span className="detail-item-name">{detail.location}</span>
          </div>
          <div className="detail-item">
            <img src={require('../../assests/img/nav2.png')} alt="" />
            <span>会议内容：</span>
            <span className="detail-item-name">{detail.introduce}</span>
          </div>
        </div>
        <div className="button-box">
          <Button size="small" type="primary" onClick={share} >分享会议</Button>
        </div>
      </div>
      {
        isshare ? null : <Tab history={props.history} />
      }
    </>
  )
}


export default AcademicDetail 